<template>
  <el-dialog v-model="dialogVisible"  width="832px" destroy-on-close>
    <Title :title="dialogTitle" />
    <div class="dialog-container">
      <el-form :model="form" label-width="auto" ref="formRef" :rules="rules">
        <el-form-item label="学院" prop="deptId">
          <el-select size="large" v-model="form.deptId" placeholder="请选择学院" filterable clearable style="width: 100%">
            <el-option v-for="opt in deptOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="年级名称" prop="gradeName">
        <el-input size="large" v-model="form.gradeName" placeholder="请输入年级名称" />
      </el-form-item>
    </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel" class="defauleButton">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { addGrade, updateGrade, getGrade, getGradeTree } from '@/api/grade'
import { ref, getCurrentInstance } from 'vue'
import Title from '@/components/Title/index.vue'

const { proxy } = getCurrentInstance()

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const emit = defineEmits(['update'])

const form = ref({
  remark: '',
  deptId: '',
  status: '',
  gradeName: '',
  updateBy: '',
  updateTime: '',
  gradeId: undefined
})

const deptOptions = ref([])

const rules = ref({
  deptId: [{ required: true, message: '学院不能为空', trigger: 'change' }],
  gradeName: [{ required: true, message: '年级名称不能为空', trigger: 'blur' }]
})

const cancel = () => close()

const confirm = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      const isUpdate = !!form.value.gradeId
      const action = isUpdate ? updateGrade : addGrade
      const payload = { ...form.value }
      if (!isUpdate) {
        payload.status = '0'
      } else if (payload.status !== undefined && payload.status !== null) {
        payload.status = String(payload.status)
      }
      action(payload).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        emit('update')
        close()
      })
    }
  })
}

const close = () => (dialogVisible.value = false)

const reset = () => {
  formRef.value?.resetFields()
  formRef.value?.clearValidate()
  form.value.remark = ''
  form.value.deptId = ''
  form.value.status = ''
  form.value.gradeName = ''
  form.value.updateBy = ''
  form.value.updateTime = ''
  form.value.gradeId = undefined
}

const init = (id, preset = {}) => {
  reset()
  loadDeptOptions()
  dialogTitle.value = id ? '修改年级信息' : '新增年级信息'
  if (id) {
    getDetail(id)
  } else {
    if (preset && preset.deptId) {
      form.value.deptId = preset.deptId
    }
  }
}

const getDetail = (id) => {
  getGrade(id).then((res) => {
    Object.assign(form.value, res.data || {})
  })
}

const openDialog = (id = null, preset = {}) => {
  init(id, preset)
  dialogVisible.value = true
}

async function loadDeptOptions() {
  try {
    const res = await getGradeTree()
    const list = Array.isArray(res.data) ? res.data : []
    deptOptions.value = list.map((item) => ({ label: item.deptName, value: item.deptId }))
  } catch (e) {
    deptOptions.value = []
  }
}

defineExpose({ openDialog })
</script>

<style scoped></style>
